import PropTypes from "prop-types"
import React, { memo, useState } from "react"

import { PhotoWrapper } from "./style"
import PictureBrowser from "@/base-ui/picture-browser"
const DetailPhotos = memo((props) => {
    const { infoData } = props
    const [showBrowser, setShowBrowser] = useState(false)
    return (
        <PhotoWrapper>
            <div className="pictures">
                <div className="left">
                    <div className="item" onClick={(e) => setShowBrowser(true)}>
                        <img src={infoData?.picture_urls?.[0]} alt="" />
                        <div className="cover"></div>
                    </div>
                </div>
                <div className="right">
                    {infoData.picture_urls.slice(1, 5).map((item) => (
                        <div
                            className="item"
                            key={item}
                            onClick={(e) => setShowBrowser(true)}
                        >
                            <img src={item} alt="" />
                            <div className="cover"></div>
                        </div>
                    ))}
                </div>
            </div>
            <div className="show-btn" onClick={(e) => setShowBrowser(true)}>
                查看图片
            </div>
            {showBrowser && (
                <PictureBrowser
                    pictureUrls={infoData.picture_urls}
                    closeClick={(e) => setShowBrowser(false)}
                />
            )}
        </PhotoWrapper>
    )
})

DetailPhotos.propTypes = {
    infoData: PropTypes.object,
}

export default DetailPhotos
